<template>
	<view class="travel-item flex--row" @click="navToTravelDetail" role="button">
		<view class="travel-item-countdown">
			<view class="travel-countdown text--secondary-dark">
				{{travelTimer.formatCountdown}}
			</view>
		</view>
		<view class="travel-item-content flex--col travel-item-content--highlight" v-show="highlight">
			<text class="text--main-dark">{{travel.routeName}}</text>
			<view class="travel-detail-list flex--col">
				<view class="travel-detail-item text--secondary-dark">
					<image src="@/static/chux/clock.svg" class="icon--middle" aria-label="出发时间"></image>
					<text>{{travel.startTime}}</text>
				</view>
				<view class="travel-detail-item text--secondary-dark">
					<image src="@/static/chux/locate.svg" class="icon--middle" aria-label="出发地点"></image>
					<text>从{{travel.startPoint}}出发</text>
				</view>
				<view class="travel-detail-item text--secondary-dark">
					<image src="@/static/chux/phone.svg" class="icon--middle" aria-label="联系方式"></image>
					<text>{{travel.phone}}</text>
				</view>
				<view class="travel-detail-item text--secondary-dark">
					<image :src="travel.otherAvatar" class="icon--middle avatar" aria-label="出行同伴"></image>
					<text>{{travel.otherName}}</text>
				</view>
			</view>
		</view>
		<view class="travel-item-content" v-show="!highlight">
			<text class="text--main-dark">{{travel.routeName}}</text>
		</view>
	</view>
</template>

<script>
	import {formatCountdown} from "@/utils/timer/travelTimer.js"
	import {timeFormat} from "@/utils/util.js"
	import {navToTravel} from "@/core/app.js"
	import * as TravelApi from "@/api/travel/travel.js"
	import * as Travel from "@/core/constant/travel.js"
	export default{
		props:['highlight','travel'],
		emits:['openTravelDetail'],
		computed:{
			travelTimer(){
				return {
					formatCountdown:formatCountdown(this.travel.countdown)
				}
			},
			travelTime(){
				return timeFormat(this.travel.startTime,this.travel.endTime)
			},
		},
		data(){
			return {
				Travel
			}
		},
		methods:{
			navToTravel(){
				navToTravel()
			},
			navToTravelDetail(){
				const travelInfo = {...this.travel}
				travelInfo.countdown = this.travelTimer.formatCountdown
				travelInfo.startTime = this.travelTime.startTime
				travelInfo.date = this.travelTime.date
				travelInfo.endTime = this.travelTime.endTime
				this.$navTo("pages/travelDetails/travelDetails",travelInfo)
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 400;
		color:#333;
	}
	
	.travel-item{
		gap:12px;
		align-items: center;
		text-align: left;
	}
	
	.travel-item-countdown {
		flex:1;
		.travel-countdown{
			text-align: center;
			padding:4px;
			font-weight: 600;
			border-radius: 10px;
			background-color: rgba($main-color,0.2);
			color:$main-color--dark;
		}
	}
	.travel-item-content{
		flex:2;
		
		gap:12px;
		align-items: flex-start;
		
		&.inactive{
			display:none;
		}
		
		&--highlight{
			padding:10px;
			@include border-four-roundings;
			.travel-detail-list{
				gap:12px;
				justify-content: flex-start;
				
				.travel-detail-item{
					display: flex;
					align-items: center;
				}
			}
		}
		
		
	}
	
</style>